آمار
وب سایت:
.gif){kind=small}
- بازدید : (1164)
در جلسه قبل، قسمت بالایی قالب را با بلاگفا سازگار کردیم ولی برای اینکه این قالب به طور کامل سازگار با بلاگفا باشد به تغییرات بیشتری نیاز است. گام بعدی اعمال تغییرات در ستون سایدبار یا همان بخشی است که منوها در آن قرار دارند.
ستون کناری و منوها
در قالب استاتیک ما یک منو ایجاد کرده بودیم ولی در اینجا لازم است کد مربوط به آن یک منو را به تعداد دفعاتی که نیاز داریم کپی و پیست کنیم. ابتدا نگاهی به کد قالب استاتیک می اندازیم:
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">منوی شماره یک </div>
</div>
<div class="widget-body">
محتویات سایدبار
</div>
</div>
در اینجا نیز با کدهای HTML کاری نداریم و آنها را به حال خود رها میکنیم، ولی شاید در انتها لازم باشد بسته به طرحی که مد نظر داریم بخشهایی را به کد فعلی اضافه کنیم یا کلاسهای بیشتری را در css ایجاد نماییم.
کد بالا، قطعه اصلی برای نمایش منو است و به هر تعداد آنرا تکرار کنید، به همان میزان منو خواهید داشت. در اینجا ما با منوی “درباره وبلاگ” آغاز میکنیم و کد بالا را به شکل زیر تغییر خواهیم داد:
<BlogProfile>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">درباره وبلاگ </div>
</div>
<div class="widget-body">
<BlogPhoto><img src="<-BlogPhotoLink->"></BlogPhoto>
<br />
<-BlogAbout->
</div>
</div>
</BlogProfile>
برای عنوان منو کدی وجود ندارد، پس عنوان منوی قبلی را که “منوی شماره یک” بود با متن مورد نظر که در اینجا “درباره وبلاگ” است جایگزین کردیم. بازهم توجه داشته باشید که تغییری در کدهای HTML و کلاسهای مربوط به css ایجاد نکردیم.
در بخش بعدی، به جای عبارت “محتویات سایدبار” کد مربوط به درباره وبلاگ را قرار دادیم. ابتدا کد مربوط به تصویر وبلاگ را قرار دادیم و سپس با تگ </ br> در سطر بعدی متنی که کاربر در قسمت درباره وبلاگ وارد کرده است را با استفاده از کد <-BlogAbout-> نمایش میدهیم. حتما دقت کرده اید که کل کدهای مربوط به منوی “درباره وبلاگ” درون کد <BlogProfile> قرار گرفته است.
منوی بعدی، پیوندهای روزانه است. بازهم کد مربوط به ایجاد منو که در قالب استاتیک ساخته بودیم را تکرار میکنیم و سپس موارد مورد نیاز را باکدهای بلاگفا جایگزین میکنیم.
<BlogLinkDumpBlock>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">پیوندهای روزانه </div>
</div>
<div class="widget-body">
<BlogLinkDump>
<a target="_blank" href="<-LinkUrl->" title="<-LinkDescription->">
<-LinkTitle-></a>
<br />
</BlogLinkDump>
<a href="javascript:void(0)" onclick ="OpenLD();">آرشیو پیوندهای روزانه </a>
</div>
</div>
< /BlogLinkDumpBlock>
همانند منوی قبلی عنوان منو را تایپ کردیم و سپس بجای “محتویات سایدبار” کد مربوط به نمایش پیوندهای روزانه را قرار دادیم. در اینجا نیز توجه داشته باشید که کدهای مربوط به منوی پیوندهای روزانه داخل کد <BlogLinkDumpBlock> قرار گرفته اند.
همین روند را برای سایر منوها نیز تکرار میکنیم و منوهای “نویسندگان”، “آرشیو مطالب”، “آرشیو موضوعی”، “برچسب ها” و “پیوند ها” را ایجاد میکنیم.
<BlogAuthorsBlock>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">نویسندگان </div>
</div>
<div class="widget-body">
<BlogAuthors>
<a href="<-AuthorLink->"><-AuthorName-></a><br />
</BlogAuthors>
</div>
</div>
</BlogAuthorsBlock>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">آرشیو مطالب </div>
</div>
<div class="widget-body">
<BlogArchive maxitems="6">
<a href="<-ArchiveLink->"><-ArchiveTitle-></a><br />
</BlogArchive>
</div>
</div>
<BlogCategoriesBlock>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">آرشیو موضوعی </div>
</div>
<div class="widget-body">
<BlogCategories>
<a href="<-CategoryLink->"><-CategoryName-></a><br />
</BlogCategories>
</div>
</div>
</BlogCategoriesBlock>
<BlogTagsBlock>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">برچسب ها </div>
</div>
<div class="widget-body">
<BlogTags>
<a href="<-TagLink->"><-TagName-></a>
<span dir="rtl">(<-TagCount->)</span><br />
</BlogTags>
</div>
</div>
</BlogTagsBlock>
<div class="widget">
<div class="widget-title-bg">
<div class="widget-title">پیوندها </div>
</div>
<div class="widget-body">
<BlogLinks>
<a target="_blank" href="<-LinkUrl->"><-LinkTitle-></a><br />
</BlogLinks>
</div>
</div>
اگر به کد بعضی از این منوها توجه کنید متوجه میشوید که برخلاف سایر منوها دارای بلوکهای اختصاصی نیستند. مثل منوی آرشیو مطالب یا منوی پیوندها. به این معنی که سایر منوها در ابتدا و انتها دارای یک کد اختصاصی هستند و تمام کد منو ما بین این دو کد قرار میگیرد به استثنای منوی آرشیو مطالب و منوی پیوند ها.
میتوانیم هر کدام از این منوها را علاوه بر (یا بجای) ستون کناری، در بخش پانوشت یا فوتر نیز قرار دهیم که این به سلیقه خود شما بستگی دارد.
در جلسه بعدی به سازگار سازی قسمت مطالب و کدهای مربوط به آن خواهیم پرداخت.
آمار مطالب
آمار کاربران
آمار بازدید
پس به همین دلیل ازتون ممنون میشیم که سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .